<template>
  <h1 style="font-size: 16px;text-align: center;">{{ eName }}</h1>

  <div class="dropdown">
    <DropdownMenu v-show="role !== 2" active-color="#9caf70" >
      <DropdownItem v-model="currentClass" :options="classOption" @click="listChange"  title-class="titleClass"/>
    </DropdownMenu>
  </div>



  <Row class="card" v-for="student in currentData" >
    <Col class="card-left" @click="showCard(student)">
      {{ student.studentName }}
    </Col>

    <Col :class="{'card-right-tea' : isTea , 'card-right-par' : !isTea}" @click="showCard(student)">
      {{ student.description }}
    </Col>
    <!--只有领导和老师可以修改卡片信息-->
    <Col class="card-modify" v-show="isTea">
      <Row  @click="modifyCard(student)">
        <img slot="icon" src="../../assets/images/modify.png" style="width: 22px;margin-bottom: 5px">
      </Row>
      <Row  @click="deleteCard(student.id)">
        <img slot="icon" src="../../assets/images/cancel.png" style="width: 22px;margin-top: 5px">
      </Row>
    </Col>

  </Row>

  <!--查看详细信息Dialog-->
  <VanDialog v-model:show="detailShow" title="学生评价信息详情" >
    <Row class="row-field" >
      <Col class="dialogCol1">姓名</Col>
      <Col class="dialogCol2">{{dialogDetailName}}</Col>
    </Row>
    <Row class="row-field">
      <Col class="dialogCol1">内容</Col>
      <Col class="dialogCol2">{{dialogDetailDescription}}</Col>
    </Row>
  </VanDialog>

  <!--修改信息Dialog-->
  <VanDialog  v-model:show="modifyShow" title="修改学生评价信息"  show-cancel-button @confirm="confirm(currentDialogId)" @cancel="cancel">
    <Row class="row-field" >
      <Col class="dialogCol1">姓名</Col>
      <Col class="dialogCol2">{{dialogModifyName}}</Col>
    </Row>
    <Row class="row-field">
      <Col class="dialogCol1">内容</Col>
      <Field class="dialogCol2" v-model="newDescription"  placeholder="请输入内容"
             rows="4"
             autosize
             type="textarea"
             maxlength="100"
             show-word-limit/>
    </Row>
  </VanDialog>


</template>

<script setup name="EvaluateDetails">
import { DropdownMenu, DropdownItem, Row, Col, Field, Dialog, Toast} from "vant";
import { computed, onMounted, ref, watch } from "vue";

import {useRoute} from "vue-router";
import { deleteInfo, getClasses, getStudentInfo, modifyInfo } from "@/v-api/school/evaluation";
import {Local} from "@/utils/storage";
const route = useRoute();

//控制组件渲染的变量
const role = Local.get('userInfo').role
const isTea = role === 0 || role ===1;
const currentData = ref([])

//从评价总表页面获取到的数据
const eId = route.query.evaluationId;
const eName = route.query.evaluationName;

//获取学生评价记录数据
const studentData = ref([])
const fetchData = async () => {
  studentData.value = ( await getStudentInfo(eId) ).data
  // console.log(studentData.value)
  currentData.value = studentData.value
}
fetchData()

//获取班级数据渲染DropDownMenu
const currentClass = ref(0)
const classes = ref([])
const classOption = ref([])
const getClassData = async () => {
  classes.value = (await getClasses()).data
  // console.log(classes.value)
  classOption.value = classes.value.map((item,index) =>{
    return {
      text: item.className,
      value: index+1
    }
  })
  classOption.value.unshift({text:'所有班级',value:0})
}
getClassData();

//渲染改变currentData
const listChange = () =>{
  if(currentClass.value === 0){
    currentData.value = studentData.value
  }else {
    currentData.value = studentData.value.filter((item) => {
      return item.classId === classes.value[currentClass.value-1].classId
    })
  }
}

//Dialogs
const VanDialog = Dialog.Component;
//Dialogs--查看详细信息
const detailShow = ref(false)
const dialogDetailName = ref('')
const dialogDetailDescription = ref('')
const showCard = (student) =>{
  detailShow.value = true;
  dialogDetailName.value = student.studentName;
  dialogDetailDescription.value = student.description;
}


//修改与删除
const modifyShow = ref(false)
const newDescription = ref('')
const dialogModifyName = ref('')
const currentDialogId = ref('')
//Dialogs--点击修改
const modifyCard = (student) => {
  modifyShow.value = true;
  dialogModifyName.value = student.studentName;
  currentDialogId.value = student.id;
  newDescription.value = student.description;
}

//确认修改信息
const confirm = (id) => {
  modifyShow.value = false;
  //调用修改函数
  modifyInfo(id,newDescription.value)
  // console.log(newDescription.value)
  // console.log(newDate.value)
  // console.log(id)
  //reset表单
  newDescription.value = ''
  fetchData()
  listChange();
  Toast.success({
    message: '修改成功',
    position: 'bottom',
  });
}
//取消修改信息
const cancel = () => {
  modifyShow.value = false;
  //reset表单
  newDescription.value = ''
}

//点击删除
const deleteCard = (key) => {
  Dialog.confirm({
    title: '提示',
    message: '是否确认删除？',
  }).then(() => {
    // on confirm
    deleteInfo(key)
    fetchData()
    listChange()
    Toast.success({
      message: '删除成功',
      position: 'bottom',
    });
  }).catch(() => {
    // on cancel
    Toast({
      message: '取消删除',
      position: 'bottom',
    });
  });
}

</script>

<style scoped>
.dropdown{
  width: 40%;/* 你的宽度值 */
  margin-left: auto;
  margin-right: auto;
  margin-top:15px;
  //border: 2px solid  #9caf70;
  border-radius: 10px;
  :deep(.van-dropdown-menu__bar){
    box-shadow: unset !important;
    //background-color: #f6faf2 !important;
    height: 38px !important;
    border-radius: 10px;
  }
  :deep(.titleClass){
    color: #787878 !important;
    font-family: 幼圆;
    font-size: 16px;
    font-weight: bold;
  }
  :deep(.van-dropdown-item__content .van-cell__title){
    flex:2 !important;
  }
}

.card{
  display: flex; /* 使用flex布局以使子元素水平排列 */
  height: 85px;
  margin: 20px;
  align-items: center; /* 垂直居中子元素 */
  justify-content: space-between; /* 水平分布子元素 */
  border: 2px solid  #9caf70;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效 */
}
.card-left{
  width: 35%;
  display: flex; /* 使用flex布局以垂直排列子元素 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平居中子元素 */
  font-size: 18px;
  font-weight: bold;
  font-family: 幼圆;
}

.card-right-par{
  width:65%;
  height: 70%;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 16px;
  color: #2b2f21;
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  border-left: 2.5px dashed #b4ccac;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-right-tea{
  width:55%;
  height: 70%;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 16px;
  color: #2b2f21;
  align-items: center; /* 垂直居中文本 */
  justify-content: center; /* 水平居中文本 */
  border-left: 2.5px dashed #b4ccac;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-modify{
  width:10%;
}


.row-field{
  margin:30px;
}
.dialogCol1{
  flex:1
}
.dialogCol2{
  flex:2;
  color:grey;
  font-size: 15px;
  padding:0;
}

</style>
